<script setup>

import ListApis from "@/apis/list.js";
// chapterPractice("章节练习", 1),
// paperLibrary("试卷库", 2),
//     specialPractice("专项练习", 3),
//     randomFormPaper("随机组卷", 4),
//     video("视频", 5),
//     materialInfo("资料", 6),
//     live("直播", 7),
const map = {
  chapterPractice: '章节练习',
  paperLibrary: '试卷库',
  specialPractice: '专项练习',
  randomFormPaper: '随机组卷',
  video: '视频',
  materialInfo: '资料',
  live: '直播'
}
const activeProduct = ref(0)

const props = defineProps({
  productList: {
    type: Array,
    default: []
  },
  selectedSkuItem: {
    type: Object,
    default: {}
  }
})

function handleClick() {
}

function getColumnTypeText(type) {
  return map[type]
}

</script>

<template>
  <div>
    <div class="">
      <span class="red">{{ selectedSkuItem.name }}</span>对应产品栏目:
    </div>
    <el-tabs v-model="activeProduct" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane :label="item.name" :name="index" v-for="(item,index) in productList" :key="index">

        <el-table :data="item.columnModels">
          <el-table-column label="栏目名称" width="180px" prop="name"></el-table-column>
          <el-table-column label="栏目类型" width="180px">
            <template #default="scope">
              {{ getColumnTypeText(scope.row.type) }}
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style scoped>
.red {
  color: red;
}
</style>